<!DOCTYPE html><!--各种标签-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>g</title>
</head>
<body> 
    <!-- 还有无语义标签 挺重要的 div和span(div是块级元素,span是行内元素   就类似于一个盒子) 这就可以代表大部分上面的有语义标签 form这一系列代替不了 -->
    <!-- <div>
        <span>张三</span>
        <span>张三</span>
        <span>张三</span>

    </div>
    <div>
        <span>李四</span>
        <span>李四</span>
        <span>李四</span>

    </div>
    <div>
        <span>王五</span>
        <span>王五</span>
        <span>王五</span>

    </div> -->


    <!-- 表单标签 这是用户和页面交互的重要手段 -->
    <!-- form  借助这个就可以让用户输入一些信息并提交到服务器上这个服务器后面再说 -->
    <!-- <form> -->
        <!-- input最常使用 -->
        <!-- test文本框 -->
        <!-- <input type="text"><br> -->

        <!-- 密码框会加密 可以在网上自己修改但是就只能看看了刷新过后就恢复了-->
        <!-- <input type="password"><br> -->

        <!-- 单选框 name相同就会让两个选择互斥,checked表示指定默认选项,
            可以使用label点击男和女也能进行点击(通过属性中的id和label中的for进行关联就可以)
        任意的html元素都可以指定id属性,而且通过id就可以确定一个页面的元素,这个id是唯一的 想操作或选择都需要使用id因此这个属性很重要-->
        <!-- <input type="radio" name="n" checked="checked" id="male">
        <label for="male">男</label>
        <input type="radio" name="n" id="female">
        <label for="female">女</label><br> -->
        <!-- <input type="radio" name="n" checked="checked">男
    
        <input type="radio" name="n">女 -->

        <!-- 复选框可以搭配label和checked来实现上面的操作 -->
        <!-- <input type="checkbox">吃饭
        <input type="checkbox">睡觉
        <input type="checkbox">打豆豆<br> -->

        <!-- 按钮 button ,value表示按钮上面显示的内容,如果想要点击按钮,就得使用js中的onclick事件才可以(alert就是弹出一个对话框) -->
        <!-- <input type="button" value="按钮" onclick="alert('hello')"> -->
        <!-- 下面这种方式也可以实现button,而且下面的更常见一些 -->
        <!-- <button onclick="alert('hello')">按钮</button> -->

        <!-- 选择文件  点击选择文件就可以选择本地文件,然后浏览器就会打本这个文件,进一步就可以实现提交上传文件到服务器等一些列的操作-->
        <!-- <input type="file"> -->



        <!-- 另一个标签select 下拉菜单  selected也可以实现默认选择-->
        <!-- <select>
            <option>--请选择年份--</option>
            <option selected="selected">2000</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
            <option>2004</option>

        </select> -->

        <!-- 多行编辑框 长和宽 -->
         <!-- <textarea cols="30" rows="10"></textarea> -->
    <!-- </form>  -->

    
    <!-- 列表标签 主要用来罗列一组并列的数据 ul li(无序列表,小圆点要不要显示都是可以通过CSS来改动的) ol li(有序列表)  dl自定义列表  
        其中最常用的就是无序列表 使用场景:把多个并列关系的元素并列在一起-->
    <!-- <h3>无序列表</h3>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <h3>有序列表</h3>

    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <h3>自定义列表</h3>
    <dl>
        <dt>自定义标题</dt>
        <dd>张三</dd>
        <dd>李四</dd>
        <dd>王五</dd>
    </dl> -->
    
    <!-- <style>
        td{
            text-align: center;
        }
    </style> -->


    <!-- 表格标签 一组标签  table表示整个表格  tr表示一行  td表示一列   th表示表头中的一列 -->
    <!-- 可以被表格加个边框就更好看出是一个表格通过bored  宽和高都设置一下 由于格子和格子间有空隙,使用cellspacing属性去掉单元格之间的空隙 
        表中内容想居中就得使用CSS了使用css中的text-align属性来设置,其实这些操作都是可以使用出css来写的很少会使用html来写(开始只有html没有css因此前面都是使用html来写的) -->
    <!-- <table border="2px" width="500px" height="200px" cellspacing="0">
        <th>姓名</th>
        <th>电话</th>
        <tr>
            <td>张三</td>
            <td>110</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>111</td>
        </tr>
    </table> -->
    


    <!-- 超链接标签:a标签  href 表示一个正确的地址 a标签也是行内元素-->
    <!-- <a href="https://www.bilibili.com/?spm_id_from=333.999.b_696e7465726e6174696f6e616c486561646572.1">bilibili</a> -->
    <!-- 只是在当前网站内部进行跳转 -->
    <!-- <a href="test2.html">另一个网页</a> -->
    <!-- 还可以写一个空链接#  开发阶段不确定的地址 -->
    <!-- <a href="#">空链接</a> -->
    <!--如果href里面不是一个网页,而是一个文件就可以触发下载操作了例如.zip就可以  -->
    <!-- 另外还可以搭配img标签来使用 然后点击图片就可以实现跳转了 -->
    <!-- <a href="https://www.nowcoder.com/jobs/recommend/campus">
        <img src="E:\picture\n.png" alt="牛客">
    </a> -->


  

    <!-- 图片标签img这是一个单标签,不需要结束标签,img里面可以写很多属性,其中src描述图片具体的位置 ,这个路径可以使绝对路径也可以是相对路径,也可以是一个网络路径-->
    <!-- <img src="E:/dog.jpg" alt="这个一个小狗" title="小狗"> -->
    <!--alt表示如果图片不能显示就会显示这个提示信息,title表示这张图片的标题,当光标滑到图片上就会提示-->
    <!-- width宽height高,这就是可以设置图片的尺寸,设置的时候就涉及了一个单位px就是"像素"(一般同时设置宽和高可能会导致图片比例失调,因此一般设置一个比例,另一个就会自己适应),一般认为像素数越多,图片就会越清晰 -->
    <!-- <img src="E:/dog.jpg" alt="" width="500px" title="小狗" > -->
    <!-- <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.zun6faBAQ3hpegJWP27yhAHaHa?w=151&h=180&c=7&r=0&o=5&dpr=1.38&pid=1.7" alt="">网络地址 -->
    <!-- <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.j5Q1V6GtakXJFs7ZTBm7WwHaHa?w=166&h=180&c=7&r=0&o=5&dpr=1.38&pid=1.7" alt=""> -->





    <!-- 在html的开始标签里面可以设置一些属性(结束标签不行)都是采用键值对这样的方式,键值对之间按照空格来分割,键和值之间使用=来分割 key不需要加引号,value需要加""双引号,不同的html标签支持的属性(可前可后不影响)是不一样的-->

    
    <!-- 格式化标签 ,在html里面写的换行和显示的换行是没有关系的,独占一行的被称为块级元素,不能独占一行的被称为行内元素-->
    <!-- <strong>加粗</strong>
    <b>加粗</b>

    <em>倾斜</em>
    <i>倾斜</i>

    <del>删除线</del>
    <s>删除线</s>

    <ins>下划线</ins>
    <u>下划线</u> -->
    
    
    <!-- 空格也是需要单独加标签的,html会忽略空格的,会把多个空格合并成一个空格 这是需要加转义字符才可以的,<>&这写都是需要转移字符的 -->
    <!-- 单引号（'）	&#039;双引号（"）	&quot;小于号（<）	&lt;大于号（>）	&gt;与（&）	&amp;空格	&nbsp; 这些都是转义字符-->
    <!-- <p>这是一个段落,Lorem &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ipsum dolor sit amet consectetur adipisicing  elit. Perferendis aut quasi aspernatur nulla tenetur et, consectetur deleniti esse, illum in minus? Et explicabo numquam minima quaerat, quis quam vitae dolorem!</p> -->
    

    <!-- 在html里面换行会被直接忽略,因此想换行就需要使用<br>标签,这是一个单标签 -->
    <!-- <p>这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Quos rem minima voluptatem, exercitationem velit aperiam at odit hic,<br> cum delectus voluptate necessitatibus alias ullam atque reprehenderit? Eum quos illo distinctio!</p> -->





     <!-- p表示段落标签 (段落之间是有间距的),lorem可以生成一个随机的比较长的字符串,方便进行一些调试-->
    <!-- <p>这是一个段落:Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis aut quasi aspernatur nulla tenetur et, consectetur deleniti esse, illum in minus? Et explicabo numquam minima quaerat, quis quam vitae dolorem!</p>
    <p>这是二个段落:Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos rem minima voluptatem, exercitationem velit aperiam at odit hic, cum delectus voluptate necessitatibus alias ullam atque reprehenderit? Eum quos illo distinctio!</p>
    <p>这是三个段落:Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem commodi quo temporibus beatae animi. Nemo accusantium cupiditate soluta, dolorem distinctio officia, at quae voluptas dolore esse velit labore eligendi hic.</p>
    <p>这是四个段落:Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus dolor ipsa velit in tenetur possimus, neque est non tempora. Architecto consequuntur voluptates reprehenderit, est repellendus libero odio incidunt provident iusto.</p> -->
   
    
    
    <!--标题h1-h6 -->
    <!-- 一级标题,可以直接写个h1然后按回车就可以直接写出来了 -->
    <!-- <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6> -->
    
    <!-- <style>
       p{
            text-indent: 2em; 这是css写的让每个段落前面都空了两个字 */
        } */
    </style> -->
    <!--注释的标签,注释不能嵌套 Ctrl + / 也可以直接注释-->


    
   
   
    

    


    

</body>
</html>